<template>
  <div id="app">
    <div class="content">
      <img src="@/assets/images/index/ni.jpg" alt="CompanyPictures" />
    </div>
    <div class="introduce">
      <div class="introduce-title">
        <a href=""
          ><b>{{ $t("section.introduce.title") }}</b></a
        >
      </div>
      <div class="introduce-content">
        <p>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $t("section.introduce.content") }}
        </p>
      </div>
      <div class="company-video">
        <video
          controls
          preload
          src="@/assets/video/天正英文2K.mp4"
        ></video>
      </div>
    </div>
    <div class="news">
      <div class="news-title">
        <a href=""
          ><b>{{ $t("content.News") }}</b></a
        >
      </div>
      <div class="tab-tit">
        <div class="Decoration-drawing">
          <img src="@/assets/images/index/gsxinwen.jpg" alt="Decoration-drawing" />
        </div>
        <el-tabs :tab-position="tabPosition" style="height: 580px">
          <el-tab-pane :label="$t('content.Company')">
            <ul class="news-ul">
              <div>
                <li
                  class="news-li"
                  v-for="(item, index) in this.post"
                  :key="index"
                >
                  <router-link :to="'/details/'+item.id" target="_blank">{{ item.titlezh }}</router-link>
                  <span>{{ item.time.substring(0, 10) }}</span>
                </li>
              </div>
              <el-button class="butt">
                <a href="newsInformation">{{$t('content.More')}}</a>
              </el-button>
            </ul>
          </el-tab-pane>
          <el-tab-pane :label="$t('content.Industry')">
            <ul class="news-ul">
              <div div v-for="item in this.list" :key="item.id">
                <li class="news-li">
                  <router-link :to="'/details/'+item.id" target="_blank">{{ item.titlezh }}</router-link>
                  <span>{{ item.time.substring(0, 10) }}</span>
                </li>
              </div>
              <el-button class="butt">
                <a href="newsInformation">{{$tc('content.More')}}</a>
              </el-button>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script >
import axios from "axios";
// import { useI18n } from "vue-i18n";

export default {
  data() {
    return {
      tabPosition: "right",
      cou: 6,
      postsList: [],
      post: [],
      list: [],
      isShow: true,
      showModal: false,
      currentPath: window.location.hash,
      clientWidth: document.body.clientWidth,
    };
  },
  created() {
    this.chartResize();
    this.getPostData();
    window.addEventListener("resize", this.chartResize, false);
  },
  methods: {
     chartResize() {
      const that = this;
      that.clientWidth = document.body.clientWidth;
      if (that.clientWidth < 720) {
        that.tabPosition = "top";
      } else {
        that.tabPosition = "right";
      }
    },
    getPostData() {
      axios.get("api/api/new?page=1").then((res) => {
        this.postsList = [res.data[1].data, res.data[2].data];
        this.post = this.postsList[0].slice(0, 6);
        this.list = this.postsList[1].slice(0, 6);
        console.log(this.post);
        console.log(this.list);
      });
    },
  },
  mounted() {
    window.addEventListener('hashchange', () => {
      this.currentPath = window.location.hash
    })
  }
};
</script>
<style src="../assets/css/homepage.css" scoped></style>